/*
1.验证码功能
2.加载功能
*/

<template>
	<view class="content">
		<!-- <view class="avatorWrapper">
		 图标logo模块
			<view class="avator">
				<image class="img" src="../../static/image/ma.jpg" mode="widthFix"></image>
			</view>
		</view> -->
		<view class="form">
			<!-- 用户名 -->
			<view class="inputWrapper">
				<input class="input" type="text" placeholder="请输入用户名" 
				@input="input_account" />
				<view class="warn">{{nameWarn}}</view>
			</view>
			<!-- 手机号 -->
			<!-- <view class="inputWrapper">
				<input class="input" type="text" placeholder="请输入手机号" 
				@input ="input_phone" />
				<view class="warn">{{phoneWarn}}</view>
			</view> -->
			<!-- 密保问题 -->
			<view class="inputWrapper">
				<input class="input" type="text" placeholder="请输入密保问题" 
				maxlength="15"
				@input ="input_question" />
			</view>
			<!-- 问题答案 -->
			<view class="inputWrapper">
				<input class="input" type="text" placeholder="请输入密保问题答案" 
				maxlength="10"
				@input ="input_ans" />
			</view>
			<!-- 密码 -->
			<view class="inputWrapper">
				<input class="input" type="password" placeholder="请输入密码" 
				@input ="input_password" />
				<view class="warn">{{pswdWarn}}</view>
			</view>
			<!-- 密码确认 -->
			<view class="inputWrapper">
				<input class="input" type="password" placeholder="请再次输入密码" 
				@input = "ensure_password" />
				<view class="warn">{{pswdWarn2}}</view>
			</view>
			<!-- 按钮 -->
			<view class="loginBtn" @click="register" hover-class="loginBtn2">
				<text class="btnText">注册</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//检查变量
				nameCheck: false,
				// phoneCheck: false,
				pswdCheck2: false,
				pswdCheck: false,
				//用户名警告 手机号警告 密码警告 确认密码警告
				nameWarn: '',
				pswdWarn: '',
				pswdWarn2: '',
				phoneWarn: '',
				//账户
				account: {
					name: '',
					password: '',
					phone: '',
				},
				//密保问题与答案
				question:'',
				ans:'',
				
			}
		},
		methods: {
			register() {
				// this.phoneCheck &&
				if (this.nameCheck && this.pswdCheck && 
					 this.pswdCheck2) {
					//正常流程
					console.log(this.question + this.ans);
					uni.request({
						url: 'http://192.168.178.50:9091/api/registerApp',
						method: 'POST',
						data: {
							username: this.account.name,
							password: this.account.password,
							question: this.question,
							ans: this.ans,
							// phone: this.account.phone,
						},
						success: (res) => {
							//正常
							console.log(res.data);
							if (res.data.code == 200) {
								uni.showToast({
									title: "注册成功",
								})
								console.log("注册成功");
								uni.reLaunch({
									url:'/pages/login/login'
								})
							} else {
								//手机号已注册
								if (res.data.code == 300) {
									uni.showToast({
										title: "手机号已经注册",
										icon: "error",
									});
									this.phoneCheck = false;
									this.phoneWarn = "手机号已经注册";
								}
								//用户名存在
								if (res.data.code == 500) {
									uni.showToast({
										title: "用户名已存在",
										icon: "error",
									});
									this.nameCheck = false;
									this.nameCheck = "用户名已经存在";
								}
							}
						},
						fail() {
							uni.showToast({
								title:"网络连接失败",
								icon:"error",
							})
						}
					});
				} else {
					// 弹出错误提示
					uni.showToast({
						title: "请修正错误内容",
						icon: "error",
					});
				}
			},
			input_account(value) {
				let that = this;
				this.nameCheck = false;
				
				if (value.detail.value == '') {
					//弹出错误提示
					this.nameWarn = '用户名不能为空';
				} else {
					if (value.detail.value.length >= 3 &&
						value.detail.value.length <= 8) {
						//检测用户名
						let Name = /^(?=.*[^\da-zA-Z\s]).{3,8}$/
						console.log(Name.test(value.detail.value));
						if (Name.test(value.detail.value)) {
							//存在非法字符
							this.nameWarn = '用户名不应包含特殊字符';
						} else {
							this.account.name = value.detail.value;
							this.nameWarn = "";
							this.nameCheck = true;
						}
					} else {
						//弹出错误提示
						if (value.detail.value.length < 3)
							this.nameWarn = '用户名过短,应为3-8位';
						else
							this.nameWarn = '用户名过长,应为3-8位';
					}
				}
			},
			input_password(value) {
				this.pswdCheck = false;
				if (value.detail.value == "") {
					this.pswdWarn = '密码不能为空'
				} else {

					if (value.detail.value.length >= 3 &&
						value.detail.value.length <= 10) {
						//包含数字
						let Num = /^(?=.*\d).{1,10}$/
						let num = Num.test(value.detail.value) ? 1 : 0;
						//包含大小字符
						let A = /^(?=.*[a-zA-Z]).{1,10}$/;
						let a = A.test(value.detail.value) ? 1 : 0;
						//包含特殊字符
						let Special = /^(?=.*[^\da-zA-Z\s]).{1,10}$/
						let special = Special.test(value.detail.value) ? 1 : 0;

						console.log(special + a + num);
						//是否满足其中两个
						if (num + a + special >= 2) {
							this.account.password = value.detail.value;
							this.pswdWarn = "";
							this.pswdCheck = true;
						} else {
							//弹出提示
							this.pswdWarn = '密码必须由大小写、特殊字符、数字两种以上组合';
						}
					} else if (value.detail.value.length < 3) {
						this.pswdWarn = '密码过短,应为3-10位';
					} else {
						this.pswdWarn = '密码过长,应为3-10位';
					}
				}

			},

			input_phone(value) {
				this.phoneCheck = false;
				let Phone = /^\d{11,11}$/;
				console.log(Phone.test(value.detail.value));
				if (Phone.test(value.detail.value)) {

					this.phoneWarn = "";
					this.account.phone = value.detail.value;
					this.phoneCheck = true;
				} else {
					this.phoneWarn = '请填写正确的11位手机号';
				}

			},

			ensure_password(value) {
				this.pswdCheck2 = false;
				if (this.account.password == value.detail.value && value.detail.value != "") {
					this.pswdCheck2 = true;
					this.pswdWarn2 = "";
				} else {
					this.pswdWarn2 = "两次密码填写不一致"
				}
			},
			input_question(value){
				this.question = value.detail.value;
				console.log(this.question);
			},
			input_ans(value) {
				this.ans = value.detail.value;
				console.log(this.ans);
			}
		}
	}
</script>

<style>
	.content {
		width: 100vw;
		height: 100vh;
		background-color: #f7f8fa;
	}

	.avatorWrapper {
		height: 30vh;
		width: 100vw;
		display: flex;
		justify-content: center;
		align-items: center;

	}

	.avator {
		width: 300rpx;
		height: 300rpx;
		padding: 10rpx;
		background-color: #2b85e4;
		overflow: hidden;

	}

	.avator .img {
		width: 100%
	}

	.form {
		padding: 0 100upx;

	}

	.inputWrapper {
		width: 100%;
		height: 80upx;
		background: white;
		border-radius: 20px;
		box-sizing: border-box;
		padding: 0 20px;
		margin-top: 25px;
		background-color: #c8c9cc;

	}

	.inputWrapper .input {
		width: 100%;
		height: 100%;
		text-align: center;
		font-size: 15px;

	}

	.loginBtn {
		width: 100%;
		height: 80upx;
		background: #2979ff;
		border-radius: 50upx;
		margin-top: 30px;
		display: flex;
		justify-content: center;
		align-items: center;

	}
	.loginBtn2 {
		width: 100%;
		height: 80upx;
		background: #89beff;
		border-radius: 50upx;
		margin-top: 30px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.bottomBTN {

		width: 100%;

	}

	.loginBtn .btnText {
		color: white;

	}

	.forgotBtn {
		float: left;
		text-align: center;
		color: #2b85e4;
		font-size: 15px;
		margin: 10px;

	}

	.warn {
		color: #fa3534;
		font-size: 15rpx;
		float: inherit;
		margin: 0px;
	}
</style>